<!-- 蓝色登录页面2 -->
<template>
	<view style="height:100vh;background: #fff;">
		<view class="img-a">
			<view class="t-b" @click="goLogin3()">
				您好，
				<br />
				商务管理系统
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">手机号</text>
						<input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="phone" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="pwd" />
					</view>
					<button style="background-color:#3ACD90" @tap="submit()">登 录</button>
				</form>
				

				  <view style="margin-top:40rpx">
				    <!-- 其他界面元素 -->
				    <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号快捷登陆</button>
				  </view>

			</view>
		</view>
		
		<view class="btnbox">
			
			<view>
				<u-button
					text="商家账户登陆"
					size="normal"
					plain
					shape="circle"
					type="success"
					@click="shangjiaclick"
					color="#3ACD90"
				></u-button>

			</view>
			<view>
				<u-button
					text="商家入驻"
					size="normal"
					plain
					shape="circle"
					type="success"
					@click="shangjiaruzhu"
					color="#3ACD90"
				></u-button>

			</view>
			
		</view>
		
	</view>
</template>
<script>
import {
	login
} from "@/common/apis/login.js"
export default {
	data() {
		return {
			// phone: '13736347061', //手机号码
			// pwd: '1234567' //密码
			phone:'',
			pwd:''
		};
	},
	onLoad() {
    this.isLoggedIn()
	},
	methods: {
    isLoggedIn() {
      // 获取本地存储的 token, userinfo, 和过期时间
      const token = uni.getStorageSync('token');
      const userinfo = uni.getStorageSync('userinfo');
      const exp = uni.getStorageSync('exp');

      // 检查 token, userinfo 是否存在
      if (!token || !userinfo) {
        console.error('未登录：缺少 token 或 userinfo');
        return false;
      }

      // 获取当前时间戳（单位：秒）
      const now = Math.floor(Date.now() / 1000);

      // 检查 token 是否已过期
      if (!exp || now >= exp) {
        console.error('登录已过期');
        return false;
      }else {
        this.$Router.pushTab({
          path: '/pages/tabBar/target'
        })
      }
    },
		onGetPhoneNumber (e) {
			console.log(e.detail.code)  // 动态令牌
			console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			console.log(e.detail.errno)  // 错误码（失败时返回）
		},
		yewuclick(){
			this.$Router.replaceAll({
				path: '/pages/index/login'
			})
		},
		shangjiaclick(){
			this.$Router.replaceAll({
				path: '/pages/index/merchantLogin'
			})
		},
		shangjiaruzhu(){
			this.$Router.replaceAll({
				path: '/pages/other/buszizhu'
			})
		},
		//当前登录按钮操作
		submit() {
			console.log("this is submit")
			var that = this;
			if (!that.phone) {
				uni.showToast({ title: 'aA123123入您的13325875181', icon: 'none' });
				return;
			}
			// if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
			// 	uni.showToast({ title: '请输入正确手机号', icon: 'none' });
			// 	return;
			// }
			if (!that.pwd) {
				uni.showToast({ title: '请输入您的密码', icon: 'none' });
				return;
			}
			
			let postData = {
				"account":that.phone,
				"password":that.pwd
			}

			login(postData).then(res => {
				console.log("this is res",res)

				if (res.status == 200) {
					// this.model1 = this.$options.data().model1
					uni.showToast({ title: '登录成功！', icon: 'none' });
					uni.setStorageSync('token',res.data.token)
					uni.setStorageSync('userinfo',res.data.business)
					
					const now = Math.floor(Date.now() / 1000);
					let expireTime = parseInt(now) + parseInt(res.data.exp)
					uni.setStorageSync('exp',expireTime)
					
					this.$Router.pushTab({
						path: '/pages/tabBar/target'
					})
				} else {
					uni.showToast({ title: res.message, icon: 'none' });
				}
			})
			
		},
	}
};
</script>
<style scoped>
.btnbox{
	display: flex;
	justify-content: space-between;
	margin-top:200rpx;
	margin-left:60rpx;
	margin-right:60rpx;
	
}
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-color:#3ACD90;
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
